<template><main>
  <am-container>
    <am-row>

      <!-- 大赛信息 -->
      <am-col :span="12">
        <am-panel collapse transparent color="primary" v-if="isShowPanel">
          <am-panel-header :title="'当前大赛：' + gameInfo.name" ></am-panel-header>
          <am-panel-body>
            <div class="am-g">
              <div class="am-sm-u-12 am-u-md-7">
                <p>描述：{{ gameInfo.desc }}</p>
                <p>大赛阶段：{{ gameInfo.stageName }}</p>
                <p>开始：{{ gameInfo.startOn }}，结束：{{ gameInfo.endOn }}</p>
                <p v-for="(prize, index) in gameDetail" :key="index">{{ prize.name }}：{{ prize.desc }}，名额：{{ prize.places }}</p>
              </div>
              <div class="am-u-sm-12 am-u-md-5">
                <am-button color="primary" @click="apply">快速报名</am-button>
              </div>
            </div>
          </am-panel-body>
        </am-panel>
        <am-warning v-else :closeable="false">
          <h3>当前没有进行中大赛，请留意下届大赛发布</h3>
        </am-warning>
      </am-col>

      <!-- 轮播图 -->
      <am-col :span="12">
        <carousel :carImgs="carImgs" />
      </am-col>

      <!-- 优秀设计师推荐 -->
      <div class="am-u-sm-12 am-u-md-8">
        <div class="dg-star"><span><img v-lazy="'/static/star_logo.png'">优秀设计师</span></div>

        <am-container>
	        <am-row>
            <div class="am-u-sm-6 am-u-md-4" v-for="(item, index) in dsgArr" :key="index">
              <div class="am-g">
                <div class="am-u-sm-5 am-padding-right-0">
                  <!-- <router-link :to="'/dsrDetail/' + item.dsrId"> -->
                    <am-image v-lazy="static_pic + item.src" :src="''" :responsive="true" :circle="true" class="am-margin-bottom" />
                  <!-- </router-link> -->
                </div>
                <div class="am-u-sm-7">
                  <h3 class="am-list-item-hd" v-text="item.name"></h3>
                  <div class="am-list-item-text" v-text="item.introduction"></div>
                </div>
              </div>
            </div>
	        </am-row>
        </am-container>
      </div>

      <!-- 历届赛事 -->
      <div class="am-u-sm-12 am-u-md-4 dg-md-up-padding-left-0">
        <div class="dg-star"><span><img v-lazy="'/static/star_logo.png'">历届赛事</span></div>

        <am-list :static="false">
          <am-list-item v-for="(item, index) in gameArr" :key="index">
            <router-link :to="'/game/' + item.ID" v-text="item.name"></router-link>
          </am-list-item>
        </am-list>
      </div>

    </am-row>
  </am-container>

  <!--  -->
  <am-confirm
    :is-show.sync="confirmVisible"
    title="提示"
    cancel-btn-text="关闭"
    confirm-btn-text="个人中心"
    @cancel="confirmVisible = false"
    @confirm="confirmHandle">
    <h3>你已报名，快去个人中心上传作品参赛吧</h3>
  </am-confirm>

</main></template>

<script>
import Carousel from '@/components/Carousel'
import { getOPTC } from '@/util/util'

export default {
  name: 'news',
  data() {
    return {
      confirmVisible: false,
      isShowPanel: false,
      carImgs: [],// 轮播图
      galImgs: [],// 侧栏图
      preGames: [],// 历届赛事
      recommendDsgs: [],// 优秀设计师
      gameDetail: '',
      gameInfo: '',
    }
  },
  components: {
    Carousel
  },
  computed: {
    /**
     * 计算vuex属性
     */
    gameID() {
      return this.$store.getters.gameID;
    },
    screenWidth() {
      // 放在data不会响应式变化
      return this.$store.state.screenWidth;
    },
    isJoin() {
      return this.$store.state.designer.isJoin;
    },
    loginID() {
      return this.$store.state.designer.loginID;
    },
    designerID() {
      return this.$store.state.designer.designerID;
    },

    gameArr() {// 历届赛事数量选取
      if(this.screenWidth < 641) {
        return this.preGames.slice(0, 4);
      } else {
        return this.preGames.slice(0, 3);
      }
    },
    dsgArr() {// 优秀设计师数量选取
      if(this.screenWidth < 641) {
        return this.recommendDsgs.slice(0, 4);
      } else {
        return this.recommendDsgs.slice(0, 3);
      }
    },
  },
  methods: {
    async ready() {
      await this.loadData();
      this.collpaseClose();
    },
    loadData() {
      /**
       * 每个promise都有自己的catch，这里无需catch
       */
      return Promise.all([
        this.loadCarImgs(),
        this.loadPreGames(),
        this.loadRecomDsgs(),
        this.loadGameData()
      ]);
    },

    /**加载轮播图 */
    loadCarImgs() {
      return new Promise((resolve, reject) => {
        this.dgpost(this.api.GETHOMECARS, {})
        .then(res => {
          this.carImgs = res.data.data.map(img => {
            return {
              path: img.imagePath,
              id: +img.works_id
            }
          });
          resolve();
        }).catch(err => {
          this.$message({
            title: '加载轮播图出错',
            type: 'error',
            message: err.msg,
            closeable: true
          });
          reject();
        });
      });
    },
    /**加载历届赛事 */
    loadPreGames() {
      return new Promise((resolve, reject) => {
        this.dgpost(this.api.GETPREGAMES, {})
        .then(res => {
          this.preGames = res.data.data;
          this.$store.commit('setPreGames', res.data.data);
          resolve();
        }).catch(err => {
          this.$message({
            title: '加载历届大赛发生错误',
            type: 'error',
            message: err.msg,
            closeable: true
          });
          reject();
        });
      });
    },
    /**加载优秀设计师 */
    loadRecomDsgs() {
      return new Promise((resolve, reject) => {
        this.recommendDsgs = [
          {
            name: '翁海霞',
            src: '/2.jpg',
            introduction: '擅长家居设计',
            dsrId: '2'
          },
          {
            name: '许淑钰',
            src: '/header2.jpg',
            introduction: '5年工作经验',
            dsrId: '2'
          },
          {
            name: '叶杜如',
            src: '/header1.jpg',
            introduction: '想法多，有创意',
            dsrId: '2'
          },
          {
            name: '邹晶晶',
            src: '/2.jpg',
            introduction: '擅长北欧风格',
            dsrId: '2'
          },
          {
            name: 'batman',
            src: '/2.jpg',
            introduction: '自我介绍',
            dsrId: '2'
          },
        ];
        resolve();
      });
    },
    /**当前大赛信息、奖项信息 */
    async loadGameData() {

      // step1
      const gameID =
      await
      this.dgpost(this.api.GETCURGAME, {})// 获取大赛基本信息
      .then(res => {
        this.gameInfo = res.data.data;
        this.$store.commit('setGameInfo', res.data.data);
        return res.data.data.ID;
      }).catch(err => {
        this.$message({
          title: '加载当前大赛发生错误',
          type: 'error',
          message: err.msg,
          closeable: true
        });
      });


      // step2
      getOPTC(gameID) === 'undefined' ? '--没有大赛--' :
      await
      this.dgpost(this.api.GETGAMEDETAILBYID, { gameID })// 获取大赛奖项信息
      .then(res => {
        this.gameDetail = res.data.data;
        this.$store.commit('setGameDetail', res.data.data);
        this.isShowPanel = true;
      }).catch(err => {
        this.$message({
          title: '加载奖项信息发生错误',
          type: 'error',
          message: err.msg,
          closeable: true
        });
      });

      // async自动resolve
    },

    /**首页报名页跳转 */
    apply() {
      if(this.designerID === '') {// 未登录
        this.$parent.showModal();
      } else {// 已登录
        if(this.isJoin === 0) {// 无资格
          this.$router.push('/apply');
        } else {// 有资格
          this.confirmVisible = true;
        }
      }
    },
    /**跳转到个人中心 */
    confirmHandle() {
      this.confirmVisible = false;
      if(this.designerID === '') {// 未登录
        this.$parent.showModal();
      } else {// 已登录
        setTimeout(() => {
          this.$router.push({path: '/personal'});
        }, 199);
      }
    },

    /**合上大赛明细 */
    collpaseClose() {
      setTimeout(() => $('.am-panel-hd-collapse').click(), 1999);
    }
  },
  mounted() {
    this.ready();
  }
}
</script>

<style lang="less" scoped>
.am-list {
  li:first-child { border-top: 0; }
}
</style>